<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>TyrantGenesis 首页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.js"></script>
    <style>
        @font-face {
            font-family: "AlexBrush";
            src: url("./fonts/AlexBrush-Regular.ttf");
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        #app {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
            Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
            sans-serif;
        }
        .ele-blind {
            display: none;
        }
        .el-message {
            min-width: 300px; !important;
        }
        .carousel {
            margin: 8px;
            border-radius: 4px;
        }
        .el-carousel__container {
            height: 180px;
            border-radius: 4px;
        }
        .TyrantGenesis {
            font-family: AlexBrush,serif;
            font-weight: 600;
            width: 100%;
            text-align: center;
            line-height: 36px;
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 32px;
        }
        .el-input { margin: 8px; width: calc(100% - 16px) }
        .svg { margin: 8px; width: calc(100% - 16px)}
        .icon-box {
            margin: 28px 8px 8px 8px;
        }
        .icon-box .icon-box-col {
            text-align: center;
        }
        .icon-box .icon-box-col .icon {
            width: 36px;
            height: 36px;
        }
        .icon-box .icon-box-col .title {
            font-size: 14px;
        }
        .image-box {
            margin: 28px 8px 8px 8px;
            display: flex;
            flex-direction: row;
        }
        .image-box .image-box-col {
            position: relative;
            text-align: center;
            height: 100px;
        }
        .image-box .image-box-col .fix {
            position: relative;
            top: -34px;
            height: 30px;
            line-height: 44px;
            background: linear-gradient(to top, rgba(125, 125, 125, 1) 0%, rgba(125, 125, 125, 0) 100%);
            text-align: right;
            font-size: 12px;
            padding-right: 4px;
            color: #fff;
            border-radius: 4px;
        }
        .collapse {
            margin: 8px;
        }
        /*.tag-box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }*/
        .tag-box .tag {
            margin: 6px 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="loading" class="ele-blind">
        <span>加载中...</span>
    </div>
    <el-carousel id="carousel" indicator-position="outside" class="carousel">
        <el-carousel-item v-for="item in banners" :key="item">
            <el-image style="width: 100%; height: 100%; border-radius: 4px" :src="item" fit="cover"></el-image>
        </el-carousel-item>
    </el-carousel>
    <!--<div class="TyrantGenesis" @click="toRule('TyrantGenesis订阅')">TyrantGenesis</div>-->
    <div class="input-with-select el-input el-input-group el-input-group--append" @click="search">
        <div class="el-input__inner" style="color: #dcdfe6">请输入搜索关键词</div>
        <div class="el-input-group__append"><button type="button" class="el-button el-button--default"><i class="el-icon-search"></i></button></div>
    </div>
    <el-row class="icon-box">
        <el-col :span="6" class="icon-box-col">
            <svg @click="bookmark" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M704.2048 957.5424H330.1376c-127.0272 0-230.4-103.3728-230.4-230.4V304.4864c0-127.0272 103.3728-230.4 230.4-230.4h374.016c127.0272 0 230.4 103.3728 230.4 230.4 0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6c0-98.816-80.384-179.2-179.2-179.2H330.1376c-98.816 0-179.2 80.384-179.2 179.2v422.656c0 98.816 80.384 179.2 179.2 179.2h374.016c98.816 0 179.2-80.384 179.2-179.2V466.7904c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v260.352c0.0512 127.0272-103.3216 230.4-230.3488 230.4z" fill="#44454A"></path><path d="M909.0048 418.4576c-14.1312 0-25.6-11.4688-25.6-25.6V378.368c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v14.4896c0 14.1312-11.4688 25.6-25.6 25.6z" fill="#44454A"></path><path d="M330.1376 99.6864c-23.808 0-46.6432 4.096-67.8912 11.5712v272.4352c0 26.0608 25.6 40.8576 43.4176 25.1392l68.4032-60.4672c9.7792-8.6528 23.296-8.5504 32.9728 0.256l64.8704 58.88c17.7664 16.128 43.6736 1.3824 43.6736-24.8832V99.6864H330.1376z" fill="#FFD833"></path><path d="M289.3312 440.832c-6.8096 0-13.7216-1.4336-20.2752-4.4032-19.712-8.8576-32.4096-29.5936-32.4096-52.7872v-272.384c0-10.8544 6.8608-20.5312 17.1008-24.1664 24.576-8.6528 50.2784-13.0048 76.3904-13.0048h185.3952c14.1312 0 25.6 11.4688 25.6 25.6v282.9312c0 23.3472-12.8512 44.1344-32.7168 52.9408-18.1248 8.0384-38.7072 4.5568-53.76-9.0624L390.4 368.128 322.56 427.9808c-9.5744 8.4992-21.3504 12.8512-33.2288 12.8512z m-1.4848-310.528v253.3376c0 2.7648 0.8192 4.4544 1.4848 5.376l67.7888-59.8528c19.5584-17.2544 47.7696-17.0496 67.1232 0.4608l64.2048 58.368c0.6656-0.8704 1.4848-2.56 1.4848-5.376V125.2864H330.1376c-14.336 0-28.4672 1.6896-42.2912 5.0176zM737.7408 810.4448h-160.5632c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6h160.5632c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6z" fill="#44454A"></path></svg>
            <div @click="bookmark" class="title">书签</div>
        </el-col>
        <el-col :span="6" class="icon-box-col">
            <svg @click="history" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M785.7152 323.584h-43.776v450.9184c0 88.2688-68.7616 159.8464-153.6 159.8464h197.376c84.8384 0 153.6-71.5776 153.6-159.8464V483.4304c0-88.2688-68.7616-159.8464-153.6-159.8464z" fill="#FFD833"></path><path d="M939.3152 595.3536c-14.1312 0-25.6-11.4688-25.6-25.6v-11.776c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v11.776c0 14.1312-11.4688 25.6-25.6 25.6z" fill="#44454A"></path><path d="M939.3152 620.6976c-14.1312 0-25.6 11.4688-25.6 25.6v128.2048c0 74.0352-57.3952 134.2464-128 134.2464h-94.3616c34.304-33.792 76.1856-91.6992 76.1856-144.4864V349.184h18.176c70.6048 0 128 60.2112 128 134.2464 0 14.1312 11.4688 25.6 25.6 25.6s25.6-11.4688 25.6-25.6c0-102.2464-80.384-185.4464-179.2-185.4464h-18.2784c-1.7408-125.5424-104.3456-227.1744-230.2976-227.1744H301.4144c-127.0272 0-230.4 103.3728-230.4 230.4v428.3392c0 127.0272 103.3728 230.4 230.4 230.4h484.3008c98.816 0 179.2-83.2 179.2-185.4464v-128.2048c0-14.1312-11.4688-25.6-25.6-25.6zM301.4144 908.7488c-98.816 0-179.2-80.384-179.2-179.2V301.2096c0-98.816 80.384-179.2 179.2-179.2h235.7248c98.816 0 179.2 80.384 179.2 179.2V729.5488c0 98.816-80.384 179.2-179.2 179.2H301.4144z" fill="#44454A"></path><path d="M563.2 321.3824H306.6368c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6H563.2c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6zM563.2 509.5936H306.6368c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6H563.2c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6zM434.8928 697.856H306.6368c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6h128.3072c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6512 25.6z" fill="#44454A"></path></svg>
            <div @click="history" class="title">历史</div>
        </el-col>
        <el-col :span="6" class="icon-box-col">
            <svg @click="download" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M777.1648 901.376H257.9456c-90.4704 0-163.84-73.3696-163.84-163.84v-10.3936h846.8992v10.3936c0 90.4704-73.3696 163.84-163.84 163.84z" fill="#FFD833"></path><path d="M777.6256 926.976H257.4336c-104.192 0-188.9792-84.7872-188.9792-188.9792v-130.6624c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v130.6624c0 75.9808 61.7984 137.7792 137.7792 137.7792h520.192c75.9808 0 137.7792-61.7984 137.7792-137.7792v-130.6624c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v130.6624c0 104.192-84.7872 188.9792-188.9792 188.9792z" fill="#44454A"></path><path d="M724.8896 393.2672a25.56928 25.56928 0 0 0-36.1984-0.1024l-145.1008 144.1792V123.4944c0-14.1312-11.4688-25.6-25.6-25.6s-25.6 11.4688-25.6 25.6v406.4256c-14.2848-13.9264-30.3616-29.5936-46.592-45.312C343.552 385.6896 342.4768 385.6896 329.2672 385.6896a25.61024 25.61024 0 0 0-12.1856 48.128c15.5136 12.1856 106.8544 100.352 186.9824 179.2512 4.9664 4.9152 11.4688 7.3728 17.9712 7.3728 6.5024 0 13.056-2.4576 18.0224-7.424l184.6784-183.5008a25.58976 25.58976 0 0 0 0.1536-36.2496z" fill="#44454A"></path></svg>
            <div @click="download" class="title">下载</div>
        </el-col>
        <el-col :span="6" class="icon-box-col">
            <svg @click="setting" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M515.7888 514.816m-127.7952 0a127.7952 127.7952 0 1 0 255.5904 0 127.7952 127.7952 0 1 0-255.5904 0Z" fill="#FFD833"></path><path d="M515.7888 668.2112c-84.5824 0-153.3952-68.8128-153.3952-153.3952 0-84.5824 68.8128-153.3952 153.3952-153.3952s153.3952 68.8128 153.3952 153.3952c-0.0512 84.5824-68.8128 153.3952-153.3952 153.3952z m0-255.5392c-56.32 0-102.1952 45.824-102.1952 102.1952s45.824 102.1952 102.1952 102.1952 102.1952-45.824 102.1952-102.1952-45.8752-102.1952-102.1952-102.1952zM886.1696 437.1968c-6.0416 0-12.0832-2.0992-16.9472-6.4a25.6 25.6 0 0 1-2.2016-36.1472c14.8992-16.8448 18.0736-41.5744 7.936-61.5424a388.5568 388.5568 0 0 0-20.224-35.328c-12.4416-19.4048-35.5328-29.0304-58.7776-24.576a25.60512 25.60512 0 0 1-29.952-20.3264 25.60512 25.60512 0 0 1 20.3264-29.952c43.9808-8.3968 87.7056 10.0864 111.5136 47.2064 8.2432 12.8 15.9232 26.2144 22.784 39.8336 19.5584 38.5536 13.4144 86.2208-15.2576 118.6304-5.12 5.6832-12.1344 8.6016-19.2 8.6016z" fill="#44454A"></path><path d="M515.7888 968.448c-10.1888 0-20.48-0.3584-30.6176-1.024-53.7088-3.6352-96.5632-46.3872-99.6352-99.4304-0.9216-16.1792-6.7584-31.6928-16.7936-44.9536-21.9136-28.8768-60.7744-39.7312-94.5152-26.4192-1.3824 0.512-2.7136 1.0752-3.9936 1.6896-50.1248 22.784-107.6224 6.2976-136.704-39.1168a459.9552 459.9552 0 0 1-22.9376-40.2432c-24.064-47.6672-9.1136-105.984 34.816-135.68 13.3632-9.0624 23.7568-21.9648 30.0032-37.3248 13.6192-33.536 3.1744-72.448-25.4976-94.72-1.1776-0.9216-2.3552-1.792-3.5328-2.6112-45.0048-31.4368-60.3648-88.8832-36.5056-136.5504 7.7824-15.5648 16.5888-30.8736 26.1632-45.4656 29.2352-44.6464 87.296-60.8256 135.0144-37.6832 14.4384 7.0144 30.72 9.5232 47.104 7.3216 35.9936-4.9152 64.5632-33.536 69.4784-69.632 0.2048-1.4336 0.3584-2.8672 0.4608-4.3008 4.6592-54.8864 46.6432-97.0752 99.9424-100.352 18.688-1.1264 37.8368-1.1264 56.6272 0.1024 53.76 3.4304 96.6656 46.336 99.7888 99.7888 0.9216 15.9744 6.656 31.3856 16.4864 44.544 14.4384 19.2 37.632 31.232 62.1568 32.2048 14.1312 0.5632 25.1392 12.4928 24.576 26.5728-0.5632 14.1312-12.6976 25.088-26.5728 24.576-40.2944-1.5872-77.1584-20.7872-101.0688-52.6848-15.9232-21.1968-25.1392-46.1824-26.6752-72.2432-1.6384-27.648-23.9616-49.8688-51.9168-51.6608-16.64-1.0752-33.6896-1.0752-50.2272-0.0512-27.6992 1.6896-49.6128 24.1664-52.0704 53.4528-0.2048 2.2528-0.4608 4.608-0.768 6.912-7.9872 58.8288-54.5792 105.472-113.3056 113.5104-26.4192 3.584-52.7872-0.5632-76.3904-11.9808-24.6272-11.9296-54.6816-3.5328-69.8368 19.6608a404.15744 404.15744 0 0 0-23.1936 40.2944c-12.3904 24.7808-3.9936 54.9376 20.0192 71.68 1.8944 1.3312 3.7888 2.7136 5.632 4.1472 46.6432 36.1984 63.744 99.7376 41.472 154.4192-10.0864 24.7808-26.9312 45.6704-48.7424 60.416-22.6304 15.3088-30.2592 45.5168-17.8176 70.2464 6.144 12.1856 13.0048 24.1664 20.3776 35.6864 15.2576 23.808 45.6704 32.256 72.3968 20.1728 2.0992-0.9216 4.2496-1.8432 6.4-2.7136 55.04-21.7088 118.3744-3.9936 154.112 43.1104 16.2304 21.4016 25.6 46.592 27.0848 72.96 1.5872 27.3408 23.9104 49.408 51.968 51.3024 16.6912 1.1264 33.6384 1.2288 50.5344 0.256 27.5456-1.5872 49.3056-24.0128 51.7632-53.248 0.2048-2.3552 0.4608-4.6592 0.768-6.9632 7.9872-59.136 54.784-105.8304 113.8176-113.664 26.5216-3.5328 53.0432 0.768 76.6464 12.4416 24.6272 12.1856 54.784 3.84 70.0416-19.4048 8.4992-12.9024 16.3328-26.4192 23.2448-40.192 12.544-24.8832 3.9936-55.1424-20.3264-71.8848-1.9456-1.3312-3.84-2.7136-5.7344-4.1984-47.5648-36.5568-64.7168-100.7104-41.728-155.9552a25.55904 25.55904 0 0 1 33.4848-13.7728 25.55904 25.55904 0 0 1 13.7728 33.4848c-13.8752 33.3824-3.1232 73.6256 25.6512 95.6928 1.1776 0.9216 2.3552 1.792 3.584 2.6112 45.6192 31.4368 61.184 89.1392 37.0176 137.1136-7.8336 15.5136-16.64 30.72-26.2144 45.312-29.4912 44.7488-87.7056 60.7232-135.4752 37.1712-14.4896-7.168-30.8736-9.7792-47.2576-7.5776-35.6352 4.7104-64.9728 34.048-69.7856 69.7344-0.2048 1.4848-0.3584 2.9696-0.4608 4.4032-4.5568 54.8352-46.5408 96.9728-99.7888 100.0448-8.7552 0.4096-17.6128 0.6656-26.3168 0.6656z" fill="#44454A"></path></svg>
            <div @click="setting" class="title">设置</div>
        </el-col>
    </el-row>
    <div class="image-box">
        <div class="image-box-col" style="margin-right: 6px" @click="collection">
            <el-image style="width: 100%; height: 100px; border-radius: 4px" :src="banners[1]" fit="cover"></el-image>
            <div class="fix">我的收藏</div>
        </div>
        <div class="image-box-col" style="margin-left: 6px" @click="home">
            <el-image style="width: 100%; height: 100px; border-radius: 4px" :src="banners[2]" fit="cover"></el-image>
            <div class="fix">我的小程序</div>
        </div>
    </div>
    <el-collapse class="collapse" v-model="active">
        <el-collapse-item title="常用首页" :name="1" class="tag-box">
            <el-tag class="tag" v-for="(item, index) in rules" :key="index" @click="toRule(item)">{{item}}</el-tag>
        </el-collapse-item>
        <el-collapse-item title="Github 摸鱼记录" :name="2">
            <el-image class="svg" src="https://github-readme-stats.vercel.app/api?username=TyrantG&show_icons=true&theme=tokyonight"></el-image>
        </el-collapse-item>
    </el-collapse>

</div>
<script>
    eval(fy_bridge_app.getInternalJs())
    new Vue({
        el: '#app',
        data() {
            return {
                banners: [
                    "https://images.squarespace-cdn.com/content/v1/55c8073fe4b02a74ffe18e48/1486448840214-GOAC8W57YEND79DA7YUI/ke17ZwdGBToddI8pDm48kK4lxbHefUfLJ_Ko8YHRtt8UqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dhHxGkRn1D8DVe2ZLqpFigHFnfYFXsGCmwqF3MtUbQip3WUfc_ZsVm9Mi1E6FasEnQ/under_the_overpass_by_yuumei-daqv1tc.jpg?format=1500w",
                    "https://images.squarespace-cdn.com/content/v1/55c8073fe4b02a74ffe18e48/1556400914659-9RQ5XC31KJX5ABMX4VJT/ke17ZwdGBToddI8pDm48kHI2D0iRKejYupKgX_F-9VEUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2durpQ2Jac2OUb2tBi6ka7e_GFwIlrN3JsxeFUv-_FxH-H3bqxw7fF48mhrq5Ulr0Hg/path+less+traveled+post.jpg?format=1500w",
                    "https://images.squarespace-cdn.com/content/v1/55c8073fe4b02a74ffe18e48/1439587391744-BB7DAFMTZ4APDJBKDWN1/ke17ZwdGBToddI8pDm48kMDFOkK0bKZD9ZnP92AY2OQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2divPb5F0SE7carcJt4vOUXSFcoXfkcYF-3AnPMP4BtttMW9u6oXQZQicHHG1WEE6fg/field_of_dreams_by_yuumei-d7wd0qx.jpg?format=1500w",
                    "https://images.squarespace-cdn.com/content/v1/55c8073fe4b02a74ffe18e48/1439588321093-ULDW7LHT0UGLUP8EP85J/ke17ZwdGBToddI8pDm48kD6g6d_8IznzvwGE9lO5DQoUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dkohZJiDdrI1I8fvN-mvKNK5lz5E2twVKTvGuJDiNEjuG6v6ULRah83RgHXAWD5lbQ/with_you_by_yuumei-d8f3a5d.jpg?format=1500w",
                    "https://images.squarespace-cdn.com/content/v1/55c8073fe4b02a74ffe18e48/1486451534686-2PLZDX4E3L5OIZD36NAW/ke17ZwdGBToddI8pDm48kCTuQe70-akU7c_UUDYAjiUUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dld_Wd7VQHcOT93iMwvqToX0yPhomxH518d_g53hgF7UOpYghpI-Ha_TwZsqqmJXng/better_tomorrow_by_yuumei-daa3fwv.jpg?format=1500w"
                ],
                active: [1, 2],
                rules: [],
                collections_count: 0,
                apps_count: 0,
            }
        },
        mounted() {
            this.rules = JSON.parse(fy_bridge_app.getVar('tyrantgenesis.rules'))
            this.$message(this.rules.length)
        },
        methods: {
            scrollEvent() {
                let carousel = document.getElementById('carousel')

                let carouselHeight = parseInt(getComputedStyle(carousel).height)
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                let viewHeight = window.innerHeight

                let differenceHeight = carouselHeight - scrollTop - viewHeight

                if(differenceHeight <= 100) {
                    alert(differenceHeight)
                }
            },
            search() {
                location.href = "hiker://search"
            },
            bookmark() {
                location.href = "hiker://bookmark"
            },
            history() {
                location.href = "hiker://history"
            },
            download() {
                location.href = "hiker://download"
            },
            setting() {
                // location.href = "hiker://setting
                this.$message.warning('暂未开放设置页面');
            },
            collection() {
                location.href = "hiker://collection"
            },
            home() {
                location.href = "hiker://home"
            },
            toRule(title) {
                location.href = "hiker://home@"+title
            },
        },
    })
</script>
</body>
</html>